Oto przykład prostego diva oraz jego kod

powrót

div

div1

div2

div3

div4

kod w html:

<div> class="grid-kontener"> </>
<div> class="div">div </>
<div> class="div1">div1 </>
<div> class="div2">div2 </>
<div> class="div3">div3 </>
<div> class="div4">div4 </>

kod w css:

.grid-kontener{
display: grid;
grid-template-columns: 40vh 20vh 40vh;
grid-template-rows: 10vh 30vh 30vh 30vh;
text-align: center;
margin: auto;
margin-top: 40px;
}
.div{
background-color: azure;
grid-column: 1/4;
border: 1px solid red;
}
.div1{
background-color: chartreuse;
grid-row: 2/4;
border: 1px solid red;
}
.div2{
background-color: aqua;
grid-column: 2/3;
grid-row: 2/3;
border: 1px solid red;
}
.div3{
background-color: brown;
grid-row: 2/4;
border: 1px solid red;
}
.div4{
background-color: rgb(30, 219, 30);
grid-column: 2/3;
grid-row: 3/4 ;
border: 1px solid red;
}